<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html>
<head>
	<title>阿玛尼护肤造型</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH }content/scripts/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH }content/css/storefront.css">
	<script src="${ROOT_PATH }content/scripts/jquery-1.10.1.min.js"></script>
	<script src="${ROOT_PATH }content/scripts/juery.hammer.js"></script>
	<script src="${ROOT_PATH }content/scripts/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<section>
		<div class="workshow">
			<div class="workshow-head">
				<div class="workshow-head-img">
					<img src="${works.imgUrl.value }" width="100%">
				</div>
				<div class="workshow-head-bar">
					<div class="price font-y">￥${works.price }</div>
					<div class="star">
						<img src="${ROOT_PATH }content/images/p2_star2.png">
						<img src="${ROOT_PATH }content/images/p2_star2.png">
						<img src="${ROOT_PATH }content/images/p2_star2.png">
						<img src="${ROOT_PATH }content/images/p2_star2.png">
						<img src="${ROOT_PATH }content/images/p2_star2.png">
					</div>
				</div>
			</div>
			<div class="workshow-body">
				
				<div class="desc">
					${works.desc.value }
				</div>
				<div class="face">
					适合脸型：${works.face.value }
				</div>
				<div>
					<div class="number">${works.number }人做过</div>
					<div class="praise"><img class="zan" src="${ROOT_PATH }content/images/p1_zan.png">&nbsp;89</div>
				</div>
			</div>
			<div class="title font-y">美发师</div>
			<div class="designer">
				<div class="designer-head">
					<div class="designer-headImg">
						<img src="${designer.headImgUrl.value}" class="img-circle" width="32px">
					</div>
					<div class="designer-head-font">
						<p class="designer-head1">
							<span class="name">${designer.name.value}</span>
							<span class="postion font-y">${designer.position.value}</span>
							<img src="${ROOT_PATH }content/images/p2_star2.png">
							<img src="${ROOT_PATH }content/images/p2_star2.png">
							<img src="${ROOT_PATH }content/images/p2_star2.png">
							<img src="${ROOT_PATH }content/images/p2_star2.png">
							<img src="${ROOT_PATH }content/images/p2_star2.png">
						</p>
						<p class="designer-head1">
							从业<span class="font-y">${designer.workTime}</span>年
							<span class="grey">|&nbsp;</span>接单<span class="font-y">${designer.frequency}</span>次
						</p>
					</div>
				</div>
				<div style="height:5px;"></div>
				<div class="designer-body">
					<div class="left b">个人简介</div>
					<div class="right font-y b"><!-- 擅长:${designer.good} --></div>
					<div class="profile">
						<div class="content">${designer.profile.value}</div>
						<div class="img"><img src="${ROOT_PATH }content/images/p3_more.png" onclick="more(this)"></div>
					</div>
					<div style="height:5px;"></div>
					<div class="address">
						<img src="${ROOT_PATH }content/images/p3_loca.png">
						<span class="font-ul">${designer.address.value}</span>
					</div>
					<div style="height:5px;"></div>
				</div>
			</div>
			
			<div class="title font-y">作品推荐</div>
			<div id="works"></div>
			<div style="height:50px;float: left;">
				&nbsp;
			</div>
		</div>
	</section>
	<div class="workshow-foot">
		<img  src="${ROOT_PATH }content/images/p3_ljyy_small.png" onclick="toOrder();">
	</div>
	<script type="text/javascript">
		var profile = "${designer.profile.value}";
		var page = 0;
		var isloading = false;
		$(function(){
			getWorks();
			bottomRefresh();
			$(".profile .content").html(profile.substring(0,50)+"...");
			
			 wx.config({
			        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        appId: '${appId}', // 必填，公众号的唯一标识
			        timestamp:"${jsapi_timestamp}", // 必填，生成签名的时间戳
			        nonceStr: '${jsapi_nonceStr}', // 必填，生成签名的随机串
			        signature: '${jsapi_signature}', // 必填，签名，见附录1
			        jsApiList: ['checkJsApi','onMenuShareTimeline', 'onMenuShareAppMessage','hideOptionMenu'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			    });
			 wx.ready(function () {
				 //wx.hideOptionMenu();
				 wx.checkJsApi({
				    jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
				    success: function(res) {
				        // 以键值对的形式返回，可用的api值true，不可用为false
				        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
				    }
				});
				 // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
				    wx.onMenuShareTimeline({
				        title: '阿玛尼明星发型秀　${designer.address.value}　${designer.name.value}',
				        link:window.location.href,
				        imgUrl: "${works.imgUrl.value }",
				        cancel: function () {},
				        success: function () {}
				    });
				    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
				    wx.onMenuShareAppMessage({
				        title: '阿玛尼明星发型秀　${designer.address.value}　${designer.name.value}',
				        desc: '阿玛尼明星发型秀　${designer.address.value}　${designer.name.value}',
				        link: window.location.href,
				        imgUrl: '${works.imgUrl.value }',
				        success: function (res) {},
				        cancel: function (res) {}
				      });
			 });
		});
		function bottomRefresh(){
			var gDiv = $("#content");
            $(window).scroll(function(){
				var scrollTop = $(this).scrollTop();
				var scrollHeight = $(document).height();
				var windowHeight = $(this).height();
				if(scrollTop + windowHeight == scrollHeight){
					//滚动触发ajax 加载页面内容 
					getWorks();
				}
            });
        }
		function getWorks(){
			if(!isloading){
				isloading = true;
				$.post("${ROOT_PATH }Storefront/worksByDesigner?designer=${designer.id.value}",
						{page:page},
						function(data){
							var content = "";
							for(i=0;i<data.length;i++){
								var works = data[i];
								content += "<div class=\"work\">"
									+ "<div class=\"work-head\">"
									+ "<div class=\"work-head-img\">"
									+ "<img src=\""+works.headImgUrl.value+"\" class=\"img-circle\" width=\"32px\">"
									+ "</div>"
									+ "<div class=\"work-head-font-l\">"+works.name.value+"</div>"
									+ "<div class=\"work-head-font-r\">"+works.position.value+"</div>"
									+ "</div>"
									+ "<div class=\"work-body\">"
									+ "<img class=\"workshow\" src=\""+works.imgUrl.value+"\" onclick=\"toWork("+works.id+")\">"
									+ "</div>"
									+ "<div class=\"work-foot\">"
									+ "<div class=\"price font-y\">￥"+works.price+"</div>"
									+ "<div class=\"number\">"+works.number+"人做过</div>"
									+ "<div class=\"praise\"><img class=\"zan\" src=\"${ROOT_PATH }content/images/p1_zan.png\">&nbsp;"+works.praise+"</div>"
									+ "</div>"
									+ "</div>";
							}
							$("#works").append(content);
							isloading = false;
							page++;
						},"json");
			}
		}
		function more(img){
			if(img.src.indexOf("p3_more.png")>-1){
				$(".profile .content").html(profile);
				img.src = img.src.replace("p3_more.png","p3_up.png")
			}else{
				$(".profile .content").html(profile.substring(0,50)+"...");
				img.src = img.src.replace("p3_up.png","p3_more.png")
			}
		}
		function toWork(id){
			location.href="${ROOT_PATH }Storefront/workshow?id="+id;
		}
		function toOrder(){
			/* var openids=["orCjajnADjE1mhSo3K5gHzODwdeI",""];
	       	 var contiansId=false;
	       	 for(var i=0;i<openids;i++){
	       		 if(openids[i]=="${openid }"){
	       			 contiansId=true;
	       			 break;
	       		 }
	       	 }
	       	 if(!contiansId){
	       		 alert("内测期间，未受邀请用户暂时无法使用，请您见谅！"); 
	       		 return;
	       	 } */
			location.href="${ROOT_PATH }Orders/mf/step3?sourceType=works&id=${works.staffHairDesignerInfoId.value}&staffno=${works.staffinfoStaffno.value}&staffopenid=${works.staffinfoStaffopenid.value}&price=${works.wxCardPrice.value}&cardid=prCjajpXHPvayBLLMtFsDRRAiXs8&staffname=${works.staffinfoStaffname.value}&companyno=${works.staffinfoCompno.value}&compipaddress=${works.companyinfoCompipaddress.value}&compname=${works.companyinfoCompname.value}&ordersFactProject=001";
		}
	</script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	
</body>
</html>